画像と文字の配置(2) 間隔の調整と回り込みの解除
今回は、「align="left"」などで画像に文字を回り込ませた場合の配置に関するテクニックを紹介します。具体的には、画像と文字の間隔を調整する方法、および文字の回り込みを解除する方法を紹介します。いずれもとっても簡単なので、ぜひ覚えるようにしてください。

→ 画像と文字の間隔を指定する
 
通常、画像の周囲にある文字は、画像に隣接して表示されます。この状態では、画像と文字の間に余白がないため、少し読みにくいページになってしまいます。このような場合は、IMGタグにhspace属性およびvspace属性を追加すると、画像の周囲に余白を設定できます。左右の余白はhspace属性、上下の余白はvspace属性を利用し、それぞれ余白をピクセル数で指定します。もちろん、hspaceとvspaceの両方を同時に指定することも可能です。
<IMG src="taxi.jpg" align="left" hspace="15" vspace="20">


→ 文字の回りこみを解除する
 
「align="left"」または「align="right"」をIMGタグに追加すると、画像の左右に文字が回り込んで配置されます。この場合、改行しても回り込みは解除されず、画像の高さ分だけ回り込みが継続されます。この回り込みを強制的に解除する場合は、BRタグにclear属性を追加します。clear属性の値は、左側の回りこみを解除する場合に"left"、右側の回りこみを解除する場合に"right"を指定します。これで、次の行以降を画像の下から開始できます。
……ドアの開け閉めは自分で行わなければいけません。<BR clear="left">

※前回と今回の講座で紹介したテクニックを使用しても、思いどおりに画像と文字を配置できない場合があります。たとえば、『画像の下辺と文字の最終行を揃えて回り込ませる』などの配置は、これまでのテクニックだけで実現できません。次回は、もっと自由自在に画像と文字を配置する方法を紹介します。


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze